<template>
    <div class="carousel-item-container"
    ref="container"
    @mousemove="handleMouseMove"
    @mouseleave="handleMouseLeave">
        <div class="carousel-img"
        ref="image"
        :style="imagePosition">
            <ImageLoader
                :high-quality-src="aCarousel.bigImg"
                :placeholder-src="aCarousel.midImg"
                
            />
        </div>
        <div class="title" ref="title">{{ aCarousel.title }}</div>
        <div class="desc" ref="desc">{{ aCarousel.description }}</div>
    </div>
</template>
<script setup lang="ts">
import { PropType, computed, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
import ImageLoader from '~@/components/ImageLoader/index.vue'
import { InterfaceBanner } from '~@/api/apiTypes';
import { c } from 'node_modules/vite/dist/node/types.d-aGj9QkWt';

    type MyTypeSize={
        width:number,
        height:number
    }

    //#region defineXxx
    defineOptions({
    name:'CarouselItem'
    });

    const props=defineProps({
    // propA:{
    // type:String,
    // required:true
    // },
    // propB:{
    // type:Number,
    // default:1
    // },
        aCurrentIndex:{
            type:Number,
            required:true
        },
        aCarousel:{
            type:Object as PropType<InterfaceBanner>,
            required:true
        },
        aItemIndex:{
            type:Number,
            required:true
        }
    });

    const emit = defineEmits<{
    event1:[para1:number,para2:string],
    event2:[para1:number,para2:string],
    }>();
    //#endregion

    const container=ref<HTMLDivElement>();
    const title=ref<HTMLDivElement>();
    const desc=ref<HTMLDivElement>();
    const image=ref<HTMLDivElement>();

    const titleWidth=ref(0);
    const descWidth=ref(0);
    const containerSize=ref<MyTypeSize>();
    const innerSize=ref<MyTypeSize>();

    const center=computed(()=>{
        return {
            x:containerSize.value!.width/2,
            y:containerSize.value!.height/2
        }
    });

    const  imagePosition=computed(()=>{
      if ( !innerSize.value || !containerSize.value) {
        return;
      }
      const extraWidth = innerSize.value.width - containerSize.value.width; // 多出的宽度
      const extraHeight = innerSize.value.height - containerSize.value.height; //多出的高度
      const left = (-extraWidth / containerSize.value.width) * mouseX.value;
      const top = (-extraHeight / containerSize.value.height) * mouseY.value;
      return {
        transform: `translate(${left}px, ${top}px)`,
      };
    });


    watch(()=>props.aCurrentIndex,()=>{
        console.log('aCurrentIndex',props.aCurrentIndex);
        console.log('aItemIndex',props.aItemIndex);
        console.log('in watchEffect');
        if(props.aCurrentIndex===props.aItemIndex){
            showWords();
        }else{
            hideWords();
        }  
    })

    const mouseX=ref(0);
    const mouseY=ref(0);
    



    onMounted(()=>{
        titleWidth.value=title.value!.clientWidth;
        descWidth.value=desc.value!.clientWidth;
        setSize();
        mouseX.value=center.value.x;
        mouseY.value=center.value.y;
        window.addEventListener('resize',setSize);
        if(props.aCurrentIndex===props.aItemIndex){
            showWords();
        }else{
            hideWords();
        }  
    })

    onUnmounted(()=>{
        window.removeEventListener('resize',setSize)
    })

    function hideWords(){
        title.value!.style.transition='none';
        title.value!.style.width='0';
        title.value!.style.opacity='0';

        desc.value!.style.transition='none';
        desc.value!.style.width='0';
        desc.value!.style.opacity='0';
    }

    function showWords(){
        console.log('in showWords');
        
        title.value!.style.opacity='100%';
        title.value!.style.width='0';
        title.value!.clientHeight;//force relfow
        title.value!.style.transition='2s';
        title.value!.style.width=titleWidth.value+'px';

        desc.value!.style.opacity='100%';
        desc.value!.style.width='0';
        desc.value!.clientHeight;//force relfow
        desc.value!.style.transition='2s';
        desc.value!.style.width=descWidth.value+'px';
    }


    const handleMouseMove=(e:MouseEvent)=>{
        const rect = container.value!.getBoundingClientRect();
        mouseX.value = e.clientX - rect.left;
        mouseY.value = e.clientY - rect.top;
    }
    const handleMouseLeave=()=>{
        mouseX.value = center.value.x;
        mouseY.value = center.value.y;
    }

    const setSize=()=>{
        containerSize.value={
            width:container.value!.clientWidth,
            height:container.value!.clientHeight,
        }
        innerSize.value={
            width:image.value!.clientWidth,
            height:image.value!.clientHeight
        }
    }

</script>
<style lang="less" scoped>
.carousel-item-container {
    background: @dark;
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
    overflow: hidden;
    .carousel-img {
        width: 110%;
        height: 110%;
        position: absolute;
        left: 0;
        top: 0;
        transition: 300ms;
    }
    .title,
    .desc {
        position: absolute;
        letter-spacing: 3px;
        left: 30px;
        color: #fff;
        text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), -1px 0 0 rgba(0, 0, 0, 0.5),
            0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        overflow: hidden;
        opacity: 0;
    }

    .title {
        top: calc(50% - 40px);
        font-size: 2em;
    }
    .desc {
        top: calc(50% + 20px);
        font-size: 1.2em;
        color: lighten(@gray, 20%);
    }
}
</style>
